<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体质评分系统 - 中医智能诊断系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4A5568',
                        secondary: '#718096'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>
<body class="bg-gray-50">
    <div class="w-[1440px] mx-auto p-6">
        <!-- 导航栏 -->
        <nav class="bg-white p-4 mb-6 shadow-md rounded-lg">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold">中医智能诊断系统</a>
                <div class="flex gap-4">
                    <a href="舌诊AI分析.html" class="text-gray-600">舌诊AI分析</a>
                    <a href="体质评分系统.html" class="text-primary font-bold">体质评分系统</a>
                    <a href="健康数据监测.html" class="text-gray-600">健康数据监测</a>
                    <a href="产后关怀专区.html" class="text-gray-600">产后关怀专区</a>
                    <a href="个人中心.html" class="text-gray-600">个人中心</a>
                    <a href="会员订阅.html" class="text-gray-600">会员订阅</a>
                </div>
            </div>
        </nav>
        
        <!-- 体质评分系统模块 -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
            <h2 class="text-2xl font-bold mb-6">体质评分系统</h2>
            
            <div class="grid grid-cols-2 gap-8">
                <div class="space-y-6">
                    <div>
                        <h3 class="font-bold mb-4">脉象数据录入</h3>
                        <div class="grid grid-cols-3 gap-4">
                            <button class="p-4 border border-gray-200 rounded-lg text-center !rounded-button pulse-option" data-value="浮脉">
                                <i class="fas fa-heartbeat text-2xl text-primary mb-2"></i>
                                <p>浮脉</p>
                            </button>
                            <button class="p-4 border border-gray-200 rounded-lg text-center !rounded-button pulse-option" data-value="沉脉">
                                <i class="fas fa-heartbeat text-2xl text-gray-400 mb-2"></i>
                                <p>沉脉</p>
                            </button>
                            <button class="p-4 border border-gray-200 rounded-lg text-center !rounded-button pulse-option" data-value="数脉">
                                <i class="fas fa-heartbeat text-2xl text-gray-400 mb-2"></i>
                                <p>数脉</p>
                            </button>
                        </div>
                    </div>

                    <div>
                        <h3 class="font-bold mb-4">面色选择</h3>
                        <div class="grid grid-cols-4 gap-4">
                            <button class="w-12 h-12 rounded-full bg-[#FFE4C4] !rounded-button face-option" data-color="#FFE4C4"></button>
                            <button class="w-12 h-12 rounded-full bg-[#FFD700] !rounded-button face-option" data-color="#FFD700"></button>
                            <button class="w-12 h-12 rounded-full bg-[#CD853F] !rounded-button face-option" data-color="#CD853F"></button>
                            <button class="w-12 h-12 rounded-full bg-[#DEB887] !rounded-button face-option" data-color="#DEB887"></button>
                        </div>
                    </div>

                    <div>
                        <h3 class="font-bold mb-4">症状选择</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="px-4 py-2 bg-gray-100 rounded-full text-sm !rounded-button symptom-option" data-symptom="头痛">头痛</button>
                            <button class="px-4 py-2 bg-gray-100 rounded-full text-sm !rounded-button symptom-option" data-symptom="失眠">失眠</button>
                            <button class="px-4 py-2 bg-gray-100 rounded-full text-sm !rounded-button symptom-option" data-symptom="胃痛">胃痛</button>
                            <button class="px-4 py-2 bg-gray-100 rounded-full text-sm !rounded-button symptom-option" data-symptom="疲劳">疲劳</button>
                            <button class="px-4 py-2 bg-primary text-white rounded-full text-sm !rounded-button symptom-option" data-symptom="焦虑">焦虑</button>
                        </div>
                    </div>

                    <div class="pt-4">
                        <button id="analyze-btn" class="w-full bg-primary text-white py-3 rounded-lg !rounded-button">
                            <i class="fas fa-chart-pie mr-2"></i>开始分析
                        </button>
                    </div>
                </div>

                <div>
                    <div id="radarChart" class="w-full h-[300px]"></div>
                    <script>
                        const radarChart = echarts.init(document.getElementById('radarChart'));
                        const option = {
                            animation: false,
                            radar: {
                                indicator: [
                                    { name: '气虚质', max: 100 },
                                    { name: '阳虚质', max: 100 },
                                    { name: '阴虚质', max: 100 },
                                    { name: '痰湿质', max: 100 },
                                    { name: '湿热质', max: 100 },
                                    { name: '血瘀质', max: 100 },
                                    { name: '气郁质', max: 100 },
                                    { name: '平和质', max: 100 }
                                ]
                            },
                            series: [{
                                type: 'radar',
                                data: [{
                                    value: [80, 50, 60, 30, 40, 70, 45, 90],
                                    name: '体质评分',
                                    areaStyle: {
                                        color: 'rgba(74, 85, 104, 0.2)'
                                    },
                                    lineStyle: {
                                        color: '#4A5568'
                                    }
                                }]
                            }]
                        };
                        radarChart.setOption(option);
                    </script>

                    <div id="analysis-report" class="mt-6 p-4 bg-gray-50 rounded-lg">
                        <h3 class="font-bold mb-2">体质分析报告</h3>
                        <p class="text-gray-600 mb-4">根据您的评分结果显示，您属于气虚质偏向，建议注意以下调理方案：</p>
                        <ul class="list-disc list-inside text-gray-600">
                            <li>注意规律作息，保证充足睡眠</li>
                            <li>适当进行温和运动，如太极、散步</li>
                            <li>饮食宜清淡，避免辛辣刺激</li>
                        </ul>
                        <div class="mt-4 flex justify-end">
                            <button id="health-btn" class="px-4 py-2 bg-primary text-white rounded-lg !rounded-button">
                                <i class="fas fa-heartbeat mr-2"></i>查看健康数据
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 脉象选择交互
        document.querySelectorAll('.pulse-option').forEach(button => {
            button.addEventListener('click', () => {
                document.querySelectorAll('.pulse-option i').forEach(icon => {
                    icon.classList.remove('text-primary');
                    icon.classList.add('text-gray-400');
                });
                button.querySelector('i').classList.remove('text-gray-400');
                button.querySelector('i').classList.add('text-primary');
            });
        });

        // 面色选择交互
        document.querySelectorAll('.face-option').forEach(button => {
            button.addEventListener('click', () => {
                document.querySelectorAll('.face-option').forEach(btn => {
                    btn.style.border = 'none';
                });
                button.style.border = '3px solid #4A5568';
            });
        });

        // 症状选择交互
        document.querySelectorAll('.symptom-option').forEach(button => {
            button.addEventListener('click', () => {
                if (button.classList.contains('bg-primary')) {
                    button.classList.remove('bg-primary', 'text-white');
                    button.classList.add('bg-gray-100', 'text-gray-600');
                } else {
                    button.classList.remove('bg-gray-100', 'text-gray-600');
                    button.classList.add('bg-primary', 'text-white');
                }
            });
        });

        // 分析按钮交互
        document.getElementById('analyze-btn').addEventListener('click', () => {
            // 模拟分析过程，显示加载状态
            document.getElementById('analyze-btn').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>分析中...';
            
            // 模拟2秒后完成分析
            setTimeout(() => {
                // 恢复按钮状态
                document.getElementById('analyze-btn').innerHTML = '<i class="fas fa-chart-pie mr-2"></i>开始分析';
                
                // 更新雷达图数据（模拟根据选择生成不同数据）
                const newData = [
                    Math.floor(Math.random() * 30) + 70, // 气虚质
                    Math.floor(Math.random() * 20) + 40, // 阳虚质
                    Math.floor(Math.random() * 20) + 50, // 阴虚质
                    Math.floor(Math.random() * 15) + 25, // 痰湿质
                    Math.floor(Math.random() * 20) + 30, // 湿热质
                    Math.floor(Math.random() * 30) + 50, // 血瘀质
                    Math.floor(Math.random() * 15) + 40, // 气郁质
                    Math.floor(Math.random() * 20) + 80  // 平和质
                ];
                
                option.series[0].data[0].value = newData;
                radarChart.setOption(option);
                
                // 滚动到分析报告
                document.getElementById('analysis-report').scrollIntoView({ behavior: 'smooth' });
            }, 2000);
        });

        // 健康数据按钮交互
        document.getElementById('health-btn').addEventListener('click', () => {
            window.location.href = '健康数据监测.html';
        });
    </script>
</body>
</html>